<template>
  <div>
    <el-row style="margin-top: 20px;">
      <el-col :span="12" :offset="4">
        <el-form :model="formData" :rules="rules" ref="formData" label-width="110px" class="demo-formData">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="活动地点" prop="address">
            <el-select v-model="formData.address" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动对象" prop="object">
            <el-select v-model="formData.object" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <!--          后期加回来-->
          <!--          <el-form-item label="联系电话" prop="phone">-->
          <!--            <el-input v-model.number="formData.phone" maxLength="11"></el-input>-->
          <!--          </el-form-item>-->
          <!--          考虑删除-->
          <!--          <el-form-item label="审核人ID" prop="administrator">-->
          <!--            <el-input v-model.number="formData.administrator" maxLength="11"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="微信" prop="wechat">
            <el-input v-model.number="formData.wechat" maxLength="20"></el-input>
          </el-form-item>
          <el-form-item label="参与人数" prop="maxPerson">
            <el-input-number v-model="formData.maxPerson" :min="0" :max="1000"></el-input-number>
          </el-form-item>
          <el-form-item label="所属社团" prop="clubName">
            <el-select v-model="formData.clubName" placeholder="请选择">
              <el-option v-for="(club) in clubList"
                         :label="club.name"
                         :key="club.id"
                         :value="club.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动分类" prop="activityType">
            <el-select v-model="formData.activityType" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动开始时间" prop="beginTime">
            <el-date-picker
              v-model="formData.beginTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动结束时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动简介" prop="activityIntroduce">
            <el-input
              type="textarea"
              placeholder="请输入内容(100字内)"
              :maxlength="100"
              v-model="formData.activityIntroduce"
              show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="活动详情" prop="activityDetail">
            <el-input
              type="textarea"
              placeholder="请输入内容(200字内)"
              :maxlength="200"
              v-model="formData.activityDetail"
              show-word-limit>
            </el-input>
          </el-form-item>
<!--          图片模块，后期可加-->
<!--          <el-form-item label="添加图片" :prop="this.formData.photo">-->
<!--            <el-upload-->
<!--              class="avatar-uploader"-->
<!--              action="http://localhost:8080/api/covers"-->
<!--              :show-file-list="false"-->
<!--              :on-success="handleAvatarSuccess"-->
<!--              :before-upload="beforeAvatarUpload">-->
<!--              <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">-->
<!--              <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--            </el-upload>-->
<!--          </el-form-item>-->
          <el-form-item class="button_submit">
            <el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {addActivity} from '@/api/activity'
import {getClublist} from '@/api/club'
import {getAllClubByStatus} from "../../../api/club";

export default {
  name: 'addActivity',
  data() {
    return {
      imageUrl: '',
      city: {},
      formData: {
        name: '', // 名称
        clubId: '',
        clubName: '',
        address: '', // 地址
        id: '',
        verifierId: '',
        activityIntroduce: '', // 介绍
        wechat: '',
        object: '',
        // kind: '',
        activityType: '',
        activityDetail: '',
        maxPerson: '',
        activityStatus: 0,
        // photo: '',
        createTime: '',
        updateTime: '',
        beginTime: '',
        endTime: ''
      },
      clubList: [],
      options1: [{
        value: '选项1',
        label: '足球场'
      }, {
        value: '选项2',
        label: '喷泉广场'
      }, {
        value: '选项3',
        label: '学术报告厅'
      }, {
        value: '选项4',
        label: 'E楼'
      }, {
        value: '选项5',
        label: 'A楼'
      }, {
        value: '选项6',
        label: 'B楼'
      }, {
        value: '选项7',
        label: 'C楼'
      }
      ],
      options2: [{
        value: '选项1',
        label: '软件工程系'
      }, {
        value: '选项2',
        label: '数码媒体系'
      }, {
        value: '选项3',
        label: '计算机系'
      }, {
        value: '选项4',
        label: '网络技术系'
      }, {
        value: '选项5',
        label: '外语系'
      }, {
        value: '选项6',
        label: '财会系'
      }, {
        value: '选项7',
        label: '管理系'
      }, {
        value: '选项8',
        label: '全体学生'
      }
      ],
      options3: [{
        value: '1',
        label: '文娱'
      }, {
        value: '2',
        label: '体育'
      }, {
        value: '3',
        label: '科技'
      }, {
        value: '4',
        label: '素拓'
      }, {
        value: '5',
        label: '讲座'
      }, {
        value: '6',
        label: '学术'
      }
      ],

      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入详细地址', trigger: 'blur'}
        ],
        // phone: [
        //   {required: true, message: '请输入联系电话'},
        //   {type: 'number', message: '电话号码必须是数字'}
        // ],
        // administrator: [
        //   {required: true, message: '请审输入核人ID'},
        //   {type: 'number', message: 'ID号码必须是数字'}
        // ],
        // describe: [
        //   {required: true, message: '请输入简单介绍', trigger: 'blur'}
        // ], // 介绍
        object: [
          {required: true, message: '请选择对象', trigger: 'blur'}
        ],
        // club: [
        //   {required: true, message: '请选择社团', trigger: 'blur'}
        // ],
        // details: [
        //   {required: true, message: '请输入详细内容', trigger: 'blur'}
        // ],
        startTime: [
          {required: true, message: '请选择时间', trigger: 'blur'}
        ]
      }
    }
  },
  components: {
    // headTop
  },
  created() {
    this.getClubList();
  },
  methods: {
    getClubList() {
      getAllClubByStatus({
        status: 1,
      }).then(res => {
        this.clubList = res.data;
      })
    },
    // async getClubName() {
    //   await getClublist(this.formData).then(res => {
    //     console.log("获取社团名：",res.data);
    //     this.clubList = res.data;
    //     console.log(this.clubList[0].clubName);
    //   })
    // },

    //图片相关
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = res;
    //   this.formData.photo = res;
    // },
    // beforeAvatarUpload(file) {
    //   const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //
    //   if (!isRightType) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!');
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!');
    //   }
    //   return isRightType && isLt2M;
    // },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
          if (valid) {
            Object.assign(this.formData)
            console.log("aaa");
            console.log(this.formData);
            addActivity(this.formData).then(res => {
              console.log(res)
              if (res.successed) {
                console.log("bbb");
                this.$message({
                  type: 'success',
                  message: res.message
                });
                this.formData = {
                  name: '', // 名称
                  clubId: '',
                  clubName: '',
                  address: '', // 地址
                  id: '',
                  verifierId: '',
                  activityIntroduce: '', // 介绍
                  wechat: '',
                  object: '',
                  // kind: '',
                  activityType: '',
                  activityDetail: '',
                  maxPerson: '',
                  activityStatus: 0,
                  // photo: '',
                  createTime: '',
                  updateTime: '',
                  beginTime: '',
                  endTime: ''
                };
                // location.reload();
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                });
              }
            })
          } else {
            this.$notify.error({
              title: '错误',
              message: '请检查输入是否正确',
              offset: 100
            });
            return false;
          }
        }
      )
      ;
    }
  }
}
</script>

<style Lang="less" scoped>
.button_submit {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.el-table .info-row {
  background: #c9e5f5;
}

.el-table .positive-row {
  background: #e2f0e4;
}
</style>
